<template>
	<view class="index-view">

		<!-- 头部搜索 与其余信息 -->
		<view class="navbar-view" >
			<!-- @leftClick="leftClick" -->
			<up-navbar leftIcon=''>
				<template #right>
					<view class="search-view">
						<up-search  searchIcon='https://oss.jtmckj.com/supplyH5/search-icon.png' @change="showToastFun"
							:clearabled="false" :showAction='false' placeholder="请输入">
						</up-search>
					</view>
				</template>
			</up-navbar>
		</view>

		<!-- 门店标题 桌台号 -->
		<shopTableInfo :storeShopInfo='storeShopInfo' :storeTableInfo='storeTableInfo' />

		<view v-if="bannerList?.length > 0" style='width: 702rpx;height: 320rpx;border-radius: 8rpx;margin: 0 24rpx;'>
			<u-swiper :list="bannerList" keyName="carouselPic" circular height="320rpx"
				imgMode='scaleToFill'></u-swiper>
		</view>

		<!-- 内容区域 -->
		<view class="content-view">

			<view class="h-20"></view>

			<!-- 无商品缺省 -->
			<view class="empty-view" v-show="leftList <= 0 && listx <= 0">
				<mescroll-empty></mescroll-empty>
			</view>
			<!-- 商品区域 -->
			<view class="chxy-row">
				<!-- 左侧分类列表  -->
				<scroll-view class="left-goods-view" scroll-y="true" :scroll-into-view="scrollintoviewLeft"
					scroll-with-animation>
					<view v-for="(item,index) in leftList" :key="item.id" :id="item.id" :ref="item.id"
						@click.stop="toAssign(item,index)"
						:class="[ leftCheckIndex === index ? 'checkBac' : 'noCheckBac',  leftCheckIndex === index && themeInfo === '001' ? 'checkBac' : (leftCheckIndex === index ? 'checkBacGay' : '') ]">
						<image
							:class="{'fl-img': leftCheckIndex !== index && themeInfo === '001','': leftCheckIndex === index}"
							v-if="item.goodsTypeImage && leftCheckIndex === index" :src="item.goodsTypeImage"
							class="wh54"></image>
						<up-image v-if='!item.goodsTypeImage && leftCheckIndex === index' width="54rpx" height="54rpx"
							src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/other/icon-default.png"></up-image>
						<view class="h-10"></view>
						<view class="fz-20">{{item.goodsTypeName}}</view>
						<view :class="leftCheckIndex === index ? '': 'checkLine'"></view>
					</view>
					<view>
						<view class="h-40"></view>
					</view>
				</scroll-view>

				<!-- 右侧商品列表   -->
				<scroll-view class="right-goods-view" :scroll-top="rightScrollTop" @scroll="rightScroll" scroll-y="true" :scroll-into-view="scrollintoview" scroll-with-animation>
					<view v-if='showMaxPicMode.showMaxFlag'>
						<view v-for="(item,index) in listx" :key="item.id" :id="item.id" :ref="item.id">
							<view class="right-item-view-max" :style="'height:' + item.height +'rpx'">
								<view v-if="item.title" class="right-item-title">
									<view class="goods-title">
										{{item.title}}
									</view>
								</view>
								<view v-if="item.title && item.typeAttachment" class="right-item-img">
									<image :src="item.typeAttachment" class="item-img"></image>
								</view>

								<view class=""> 
									<up-image v-if="item.attachment && item.isEstmClear == '0'" @click="previewImageFun(item.attachment)" width="546rpx" height="300rpx"
										:src="item.attachment" mode="aspectFill" radius='10rpx'>
									</up-image>
									<view v-else-if="item.attachment && item.isEstmClear == '1'" style="width: 546rpx;height: 300rpx;position: relative;">
										<view style="background-color: rgba(0, 0, 0, 0.7);width: 546rpx;height: 300rpx;position: absolute;top: 0;left: 0;z-index: 2;border-radius: 10rpx;"
											class="chxy-row-c-c">
											<view style="width: 120rpx;height: 60rpx;border-radius: 8rpx;border: 1rpx solid #a3a3a3;font-weight: 500;font-size: 32rpx;line-height: 60rpx;color: #fff;text-align: center;">
												已售罄
											</view>
										</view>
										<up-image width="546rpx" height="300rpx" :src="item.attachment" mode="aspectFill" radius='10rpx'></up-image>
									</view>
									<up-image v-else width="546rpx" height="300rpx" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/other/icon-default.png" radius='10rpx'>
									</up-image>
									
									<view class="chxy-row-ac over-hidden-el" style="width: 498rpx;margin: 0 24rpx;overflow-x: hidden;height: 60rpx;line-height: 60rpx;font-family: PingFang SC;font-weight: 500;font-size: 28rpx;">
										{{item.goodsName}}{{ item.englishName }}
									</view>
									<view class="chxy-row" style="margin: 0 24rpx 10rpx 24rpx;">
										<template v-if="storeCardInfo.isPayCard ==='1'">
											<view class="inter-Member chxy-row-ac" v-if="themeInfo == '001'">
												<view class="left-xq chxy-row-ac">
													<image
														src="https://oss.jtmckj.com/wmp/qnjg/order/i_icon_ball-y2.png"
														mode=""></image>
													<view class="">星际会员</view>
												</view>
												<view class="right-box-in chxy-row-c-c">
													<view class="dol">￥</view>
													<view class="price-xj">{{item.vipPrice}}</view>
												</view>
											</view>
											<view class="inter-Member2" v-else>
												<view class="left-xq">
													<image src="https://oss.jtmckj.com/wmp/qnjg/order/i_icon_ball-y.png"
														mode=""></image>
													<view class="">
														星际会员
													</view>
												</view>
												<view class="right-box">
													<text class="price">￥{{item.vipPrice}}</text>
												</view>
											</view>
										</template>
									</view>
									<view class="chxy-row-bt" style="margin: 0 24rpx;">

										<view class="chxy-row-bt goods-cell-type" v-if="item.type === '1' &&  item.priceList.length <= 1 && !item.goodsFlavor">
											<view class="single-price">
												<text class="type-pub-dol">￥</text>
												<text class="type-pub-pri">{{item.salePrice}}</text>
											</view>
											<view @click="showToastFun">
												<order-number-box :disabled='true' :max="0" :min="0" v-model="itemQty"/>
											</view>
										</view>

										<view class="chxy-row-bt goods-cell-type" v-if="item.type === '1' && item.priceList.length > 1 || item.goodsFlavor ">
											<view class="specs-price">
												<text class="type-pub-dol">￥</text>
												<text class="type-pub-pri">{{item.salePrice}}</text>
											</view>
											<view @tap="$u.throttle(btnGgClick(item,index), 500)" class="specs-check-view">
												选规格
												<view class="specs-num">
													<!--  -->
												</view>
											</view>
										</view>

										<view class="chxy-row-bt goods-cell-type" v-if="item.type === '2'">
											<view class="single-price">
												<text class="type-pub-dol">￥</text>
												<text class="type-pub-pri">{{item.salePrice}}</text>
											</view>
											<view @tap="$u.throttle(btnTcClick(item,index), 500)"
												class="package-check-view">
												选套餐
												<view class="package-num">
												    <!--  -->
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else>
						<view v-for="(item,index) in listx" :key="item.id" :id="item.id" :ref="item.id">
							<view class="right-item-view" :style="'height:' + item.height +'rpx'" >
								 
								<view v-if="item.title" class="right-item-title"> 
									<view class="goods-title">
										{{item.title}}
									</view>
								</view>
								<view v-if="item.title && item.typeAttachment" class="right-item-img">
									<image :src="item.typeAttachment" class="item-img"></image>
								</view>
								 
								<view class="chxy-row-ac right-goods-cell">  
									<up-image v-if="item.attachment" @click="previewImageFun(item.attachment)" width="200rpx" height="200rpx" :src="item.attachment" mode="aspectFill" radius='10rpx'></up-image>
									<up-image v-else width="200rpx" height="200rpx" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/other/icon-default.png" radius='10rpx'></up-image>
									<view class="chxy-column-c-c goods-cell-text" >
										<view class="h-20"></view>
										<view style="height: 138rpx;">  
											<text class="over-hidden-two goods-cell-name">
												{{item.goodsName}}{{ item.englishName }}
											</text>
											<view class="h-8"></view>
											<view class="over-hidden-el goods-cell-desc">
												{{item.descript || ''}}
											</view>
											<view class="h-8"></view>
											<template v-if="storeCardInfo.isPayCard ==='1'"> 
												<view class="inter-Member chxy-row-ac" v-if="themeInfo == '001'">
												<view class="left-xq chxy-row-ac">
													<image src="https://oss.jtmckj.com/wmp/qnjg/order/i_icon_ball-y2.png" mode=""></image>
												   	<view class="">星际会员</view>
												</view>
												<view class="right-box-in chxy-row-c-c"> 
													<view class="dol">￥</view>
													<view class="price-xj">{{item.vipPrice}}</view>  
												</view>
											</view> 
											<view class="inter-Member2" v-else>
												   <view class="left-xq">
														 <image src="https://oss.jtmckj.com/wmp/qnjg/order/i_icon_ball-y.png" mode=""></image>
														 <view class="">
															星际会员
														 </view>
												   </view>
												   <view class="right-box">
														  <text class="price">￥{{item.vipPrice}}</text>
												   </view>
											</view>
											</template>
						
										</view>
									
									
										<view class="h-10"></view> 
										<view class="chxy-row-bt goods-cell-type" v-if="item.type === '1' &&  item.priceList.length <= 1 && !item.goodsFlavor" >
											<view class="single-price" >
												<text class="type-pub-dol">￥</text>
												<text class="type-pub-pri">{{item.salePrice}}</text> 
											</view>
											<view @click="showToastFun">
												<order-number-box :disabled='true' :max="0" :min="0" v-model="itemQty"/>
											</view>
										</view>
									 
										<view class="chxy-row-bt goods-cell-type" v-if="item.type === '1' && item.priceList.length > 1 || item.goodsFlavor ">
											<view class="specs-price" >
											    <text class="type-pub-dol">￥</text>
											    <text class="type-pub-pri">{{item.salePrice}}</text> 
											</view>
											<view @tap="$u.throttle(btnGgClick(item,index), 500)" class="specs-check-view">
												选规格
												<view class="specs-num">
													<!--  -->
												</view>
											</view>
										</view>
										 
										<view class="chxy-row-bt goods-cell-type" v-if="item.type === '2'" > 
											<view class="single-price" >
												<text class="type-pub-dol">￥</text>
												<text class="type-pub-pri">{{item.salePrice}}</text> 
											</view> 
											<view @tap="$u.throttle(btnTcClick(item,index), 500)"
												class="package-check-view">
												选套餐
												<view class="package-num">
												    <!--  -->
												</view>
											</view>
										</view> 
										<!-- <view class="h-30"></view> -->
									</view> 
								</view>
								<view class="right-goods-cell-line"></view>
							</view>
						</view>
					</view>
					<view>
						<view class="h-40"></view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 购物车栏  -->
		<view class="card-nav-view">
			<good-cart-nav :zIndexNum='zIndexNum' :handleFlag="false"></good-cart-nav>
		</view>

		<!-- 已点订单 悬浮拖拽按钮 -->
		<!-- <movable-order :handleFlag="false" /> -->

		<!-- 套餐-->
		<package-product ref="testProduct" :handleFlag="false"/>

		<!-- 规格 -->
		<package-specs ref="specsRef" :handleFlag="false"/>

	</view>
</template>
<script setup>
	import shopTableInfo from './components/shopTableInfo.vue';
	import { ref, reactive, onMounted, nextTick } from 'vue';
	import { onLoad, onUnload, onShow, onHide } from '@dcloudio/uni-app';
	import { HFiveAppObjProcess, HFiveMemberAppObjProcess } from '@/api/public.js'
	import { initTableInfo, initTableInfoFinish, numMultiFun, updateTableInfo } from "@/until/tools.js"
	import { clearStoreGoodsNum } from "@/until/orderUtils.js"
	import { useCartStore } from '@/store/cart.js';
	import { useTableStore } from '@/store/table.js';   
	const storeCart = useCartStore(); // 购物车store   
	const storeTable = useTableStore();
	const storeTableInfo = ref({})
	const storeShopInfo = ref({})
	const itemQty = ref(0)

	const minPicMode = ref({
		'oneHeight': 240,
		'twoHeight': 320,
		'threeHeight': 440 // 440 320 120
	})
	const maxPicMode = ref({
		'oneHeight': 474,
		'twoHeight': 554,
		'threeHeight': 694
	})
	const showMaxPicMode = ref({}) // 右侧商品展示模式数据集
	const listx = ref([]) // 右侧商品数据
	const listxCopy = ref([]) // 右侧商品数据
	const scrollintoview = ref('') // 右侧商品
	const rightScrollTop = ref(0) // 右侧商品 
	const timer = ref(null) // 定时器
	const distanceList = ref([]) // 右侧 计算商品的总高度

	const leftCheckIndex = ref(0) // 左侧分类选中坐标
	const leftList = ref([]) // 左侧分类
	const leftListCopy = ref([]) // 左侧分类
	const scrollintoviewLeft = ref('') // 左侧   
	const isLeftClick = ref(false) // 左侧选中开关 

	const goodsCartNav = ref(null) // 购物车ref     
	const searchGoods = ref('') // 头部搜索关键字   

	// 套餐
	const zIndexNum = ref(1) // 当前套餐弹窗与购物车弹窗不同层级切换 
	const testProduct = ref() // 当前套餐弹窗ref 

	// 规格
	const specsModal = ref({}) // 当前规格弹窗信息
	const specsRef = ref() // 当前规格弹窗ref     

	const themeInfo = ref(uni.getStorageSync('themeInfo')?.type)

	const storeCardInfo = ref(uni.getStorageSync('cardInfo'))

	const bannerList = ref([])

	onUnload(() => {
		console.log('onUnload') 
	}); 

	onHide(() => {
		console.log('uni.ononHide...'); 
	})

	// 返回不触发
	onLoad(() => {
		console.log('onLoad')  
	});
 
	// 返回触发
	onShow(() => { 
		console.log('uni.onShow') 
		initData() 
	});  

	const initData = async () => {
		bannerList.value = uni.getStorageSync('shopInfo')?.topList || [] 
		await initTableInfoFun()
		initGoodsFun()
		initShopInfoFun()
	} 
	
	const initShopInfoFun = () => {
		storeShopInfo.value = uni.getStorageSync('shopInfo')
	}

	// 通过id 定位右侧商品位置
	const toAssign = (item, index) => { 
		isLeftClick.value = true
		leftCheckIndex.value = index
		nextTick(() => {
			scrollintoview.value = item.id
			console.log('scrollintoview.value：', scrollintoview.value)
		})
	}

	// 右侧滑动 左侧定位
	const rightScroll = (e) => { 
		setTimeout(function() {
			if (isLeftClick.value) {
				isLeftClick.value = false
				return
			}
			if (timer.value) {
				clearTimeout(timer.value)
			}
			timer.value = setTimeout(() => {
				let scrollTop = e.detail.scrollTop / (uni.upx2px(100) / 100) //滚动的高度 
				let linshi = 0
				distanceList.value.forEach((item, index) => {
					if (scrollTop > item) {
						linshi = index
					}
				})
				if (linshi < -1) return
				leftCheckIndex.value = linshi
				nextTick(() => {
					scrollintoviewLeft.value = leftList.value[linshi].id
				})
			}, 500)
		}, 200);
	}    
	
	
	const showToastFun =  () => {  
		uni.showToast({ title: '请先扫描桌台二维码后再继续下单', icon: 'none' })
	}

	// 规格弹窗
	const btnGgClick = (goodItem, index) => { 
		nextTick(() => {
			specsRef.value.initDataSpecs(goodItem)
		})
	} 

	// 套餐
	const btnTcClick = (goodItem, index) => {
		zIndexNum.value = 1
		nextTick(() => {
			testProduct.value.initDataProduct(goodItem)
		})
	} 

	// 初始化桌台信息
	const initTableInfoFun = async () => {
		storeTableInfo.value = await initTableInfo() // 获取房台信息（包括低消） 
	}

	// 初始化商品信息
	const initGoodsFun = async (desc = '') => { 
		let showMaxFlag = true
		if(themeInfo.value == '008'){
			showMaxFlag = false
		}
		let newshopInfo = uni.getStorageSync('shopInfo')
		newshopInfo.isMaxPicMode = showMaxFlag
		uni.setStorageSync('shopInfo',newshopInfo) 
		showMaxFlag ? showMaxPicMode.value = maxPicMode.value : showMaxPicMode.value = minPicMode.value
		showMaxPicMode.value['showMaxFlag'] = showMaxFlag
		uni.showLoading({
			title: desc,
			mask: true
		});
		// 白名单模式 
		if (uni.getStorageSync('cartList') && uni.getStorageSync('cartTypeList') && 1===2 ) {
			listx.value = uni.getStorageSync('cartList')
			listxCopy.value = uni.getStorageSync('cartList')
			leftList.value = uni.getStorageSync('cartTypeList')
			leftListCopy.value = uni.getStorageSync('cartTypeList')
			nextTick(() => {
				let allRpx = 0
				distanceList.value = []
				listx.value.forEach((item, index) => {
					if (item.title && item.typeAttachment) {
						distanceList.value.push(allRpx)
						allRpx += showMaxPicMode.value.threeHeight
					} else if (item.title) {
						allRpx += showMaxPicMode.value.twoHeight
					} else {
						allRpx += showMaxPicMode.value.oneHeight
					}
				})
				goodsCartNav.value.toRefresh()
			})
			setTimeout(function() {
				uni.hideLoading();
			}, 500);
			return
		}
		let resType = []
		let resultGoods = []
		let resGoods = []
		let modalType = { "functionName": "GetGoodsTypeOrg_H5", "contentData": "" }
		resType = await HFiveMemberAppObjProcess(modalType);
		let modalGoogs = { "functionName": "getGoodsInfoTerminal_H5", "contentData": { "terminalType": "2", "currentTime": '', "roomAreaCode": storeTableInfo
					.value?.roomAreaCode } }
		let resGo = await HFiveMemberAppObjProcess(modalGoogs);
		resGoods = await new Promise((resolve) => {
			resolve(resGo.sort((a, b) => b.indexStr - a.indexStr));
		});
		resType.forEach((item, index) => {
			resGoods.forEach((subitem, subindex) => {
				let listGs = subitem.goodsType.split(',')
				listGs.forEach((tItem, tindex) => {
					if (item.goodsTypeCode === tItem && subitem.isEstmClear == "0") {
						let newSubItem = { ...subitem }
						let randomNum = Math.floor(Math.random() * 10000000)
						newSubItem['height'] = showMaxPicMode.value.oneHeight
						if (!item['id']) {
							item['id'] = 'Item' + index + subindex + tindex + randomNum
							newSubItem['title'] = item.goodsTypeName
							if (item.typeAttachment) {
								newSubItem['typeAttachment'] = item.typeAttachment
								newSubItem['height'] = showMaxPicMode.value.threeHeight
							} else {
								newSubItem['typeAttachment'] = ''
								newSubItem['height'] = showMaxPicMode.value.twoHeight
							}
						}
						newSubItem['goodsType'] = tItem
						newSubItem['qty'] = 0
						newSubItem['id'] = 'Item' + index + subindex + tindex + randomNum
						resultGoods.push(newSubItem)
					}
				})
			})
		})
		leftList.value = resType.filter(item => item.id); //resType
		if (resultGoods.length <= 0) {
			uni.showToast({ title: '商品数据有问题，请联系管理员！', icon: 'none' })
			return
		}
		listx.value = resultGoods
		listxCopy.value = resultGoods
		leftListCopy.value = leftList.value
		storeCart.SetCartList(resultGoods)
		storeCart.SetCartTypeList(leftList.value)
		nextTick(() => {
			let allRpx = 0
			distanceList.value = []
			listx.value.forEach((item, index) => {
				if (item.title && item.typeAttachment) {
					distanceList.value.push(allRpx)
					allRpx += showMaxPicMode.value.threeHeight
				} else if (item.title) {
					distanceList.value.push(allRpx)
					allRpx += showMaxPicMode.value.twoHeight
				} else {
					allRpx += showMaxPicMode.value.oneHeight
				}
			})
			// goodsCartNav.value.initDataNav()
			// goodsCartNav.value.toRefresh()
		})
		if (desc) {
			await sleep(2500);
			uni.hideLoading();
		} else {
			uni.hideLoading();
		}
	}

	const sleep = (ms) => {
		return new Promise(resolve => setTimeout(resolve, ms));
	} 
	 
	const leftClick = () => {
		uni.switchTab({
			url: '/pages/home/index'
		})
	}

	// 图片预览
	const previewImageFun = (urlImg) => {
		uni.previewImage({
			current: 0,
			urls: [urlImg],
			fail(err) {
				console.log(err)
			},
		})
	} 
</script>

<style lang="scss" scoped>
	::v-deep {
		.u-image {
			background-color: transparent !important;
		}
	}

	.index-view {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
	}

	.navbar-view {
		height: 44px;
		width: 100vw;

		.search-view {
			width: calc(100vw - 26px); // - 56px
		}
	}

	.content-view {
		height: 100vh;
		background-color: #fff;
	}

	.empty-view {
		position: absolute;
		top: calc(20vh + 320rpx);
		left: 0;
		width: 100vw;
	}

	.left-goods-view {
		width: 160rpx;
		overflow-y: scroll;
		border-radius: 0rpx 16rpx 0px 0rpx;
		height: calc(100vh - 100rpx - 100rpx);
	}

	.right-goods-view {
		width: calc(100vw - 160rpx);
		position: relative;
		height: calc(100vh - 100rpx - 100rpx);
		overflow-y: scroll;
	}

	.right-item-view {
		width: calc(100vw - 160rpx - 44rpx);
		margin-left: 20rpx;
		overflow: hidden;
	}

	.right-item-view-max {
		width: calc(100vw - 160rpx - 44rpx);
		margin-left: 20rpx;
		overflow: hidden;
		// background-color: #F5F5F5;
		margin-bottom: 20rpx;
		// border-radius: 16rpx;
		border-bottom: 1rpx solid #e7e7e7; // #F5F5F5
	}

	.right-item-title {
		height: 80rpx;
		background-color: #ffffff; // f5f5f5

		.goods-title {
			padding-top: 40rpx;
			color: #666666;
			font-size: 24rpx;
			font-weight: bold;
		}
	}

	.right-item-img {
		height: 120rpx;
		margin-bottom: 20rpx;

		.item-img {
			width: 100%;
			height: 100%;
			border-radius: 20rpx 20rpx 0 0;
		}
	}

	.right-goods-cell {
		height: 238rpx;
	}

	.goods-cell-text {
		margin-left: 30rpx;
		width: 310rpx; // 346rpx
	}

	.goods-cell-name {
		line-height: 28rpx;
		color: #212121;
		font-weight: bold;
		width: 310rpx;
	}

	.goods-cell-desc {
		height: 30rpx;
		font-size: 20rpx;
		color: #666666;
		width: 310rpx;
	}

	.inter-Member {

		.left-xq {
			height: 32rpx;
			background: #FFDABF;
			padding: 0 6rpx;
			font-weight: 500;
			font-size: 22rpx;
			line-height: 22rpx;
			color: #804013;
			border-radius: 4rpx 0rpx 0rpx 4rpx;

			image {
				width: 26rpx;
				height: 26rpx;
			}
		}

		.right-box-in {
			border-radius: 0rpx 4rpx 4rpx 0rpx;
			min-width: 120rpx;
			text-align: center;
			height: 34rpx;
			background: #FFE9D9;
			color: #804013;

			.dol {
				font-size: 20rpx;
			}

			.price-xj {
				height: 34rpx;
				font-family: PingFang SC;
				line-height: 32rpx;
				font-weight: 500;
				font-size: 26rpx;
				font-weight: 500;
			}
		}
	}

	.goods-cell-type {
		width: 100%;
		height: 48rpx;

		.single-price {
			width: 172rpx;
			overflow-x: hidden;
		}

		.specs-price {
			width: 172rpx;
			overflow-x: hidden;
		}

		.specs-check-view {
			position: relative;
			width: 88rpx;
			height: 48rpx;
			background: var(--dt-backcolorPink);
			border-radius: 24rpx;
			border-radius: 24rpx;
			line-height: 48rpx;
			text-align: center;
			color: var(--maincolor);
			font-size: 20rpx;

			.specs-num {
				position: absolute;
				top: -20rpx;
				right: 0;
				color: red;
			}
		}

		.package-price {
			width: 172rpx;
			overflow-x: hidden;
		}

		.package-check-view {
			position: relative;
			width: 88rpx;
			height: 48rpx;
			background: var(--dt-backcolorPink);
			border-radius: 24rpx;
			border-radius: 24rpx;
			line-height: 48rpx;
			text-align: center;
			color: var(--maincolor);
			font-size: 20rpx;

			.package-num {
				position: absolute;
				top: -20rpx;
				right: 0;
				color: red;
			}
		}
	}

	.right-goods-cell-line {
		height: 2rpx;
		background: #F2F2F2;
	}

	.card-nav-view {
		background-color: #fff;
		height: 100rpx;
		width: 100vw;
		position: fixed;
		bottom: 0;
		z-index: 2;
	}

	.noCheckBac {
		position: relative;
		background-color: #F5F5F5;
		height: 80rpx;
		padding-bottom: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.checkBac {
		background: linear-gradient(to right, #F6DEEB, #F5F4F5);
		height: 144rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-left: 10rpx solid #FF66BD;
	}

	.type-pub-dol {
		font-size: 24rpx;
		color: #212121;
		font-weight: bold;
	}

	.type-pub-pri {
		font-size: 34rpx;
		color: #212121;
		font-weight: bold;
	}

	.checkLine {
		position: absolute;
		bottom: 1rpx;
		left: 0;
		margin: 0 20rpx;
		width: 90rpx;
		height: 1rpx;
		background: #E6E6E6;
		box-shadow: 0rpx 1rpx 0rpx 0rpx #FFFFFF;
	}

	.fl-img {

		filter: saturate(0) brightness(0.5) contrast(0.11); // 灰度调最后的属性
	}

	.wh54 {
		width: 54rpx;
		height: 54rpx;
	}

	.fz-20 {
		font-size: 20rpx;
	}

	.h-120 {
		height: 120rpx;
	}

	.checkBacGay {
		border-left: 10rpx solid #666666;
		background: linear-gradient(to right, #c5c5c5, #eeeeee);
	}

	.inter-Member2 {
		// margin: 20rpx 0;
		display: flex;
		align-items: center;
		width: 248rpx;
		border: 1rpx solid #212121;
		border-radius: 4rpx;
		background: #212121;

		.left-xq {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #212121;
			padding: 0 6rpx;

			image {
				margin-right: 4rpx;
				width: 25rpx;
				height: 19rpx;
			}

			view {
				font-weight: 500;
				font-size: 20rpx;
				color: #FFCC66;
			}
		}

		.right-box {
			flex: 1;
			text-align: center;
			line-height: 32rpx;
			background: #fff;

			.price {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #212121;
				font-weight: 700;
			}
		}
	}
</style>